<template>
  <footer>
    <div class="top">
      <div class="goto-top" @click="goToTop"></div>
    </div>
    <div class="foot-main">
      <div class="foot-wrap">
        <header>
          <h3>
            <span>CONTACT</span>
            <span>联系我们</span>
          </h3>
        </header>
        <section class="clearfix">
          <div class="fl left">
            <dl class="fl">
              <dt>联系人</dt>
              <dd>东莞负责人：严先生</dd>
              <dd>北京负责人：游先生</dd>
            </dl>
            <dl class="fl tel">
              <dt>联系电话</dt>
              <dd>东莞负责人：严先生 16620826658</dd>
              <dd>北京负责人：游先生 13718182767  (微信同号)</dd>
            </dl>
            <dl class="fl addr">
              <dt>地址</dt>
              <dd>东莞办公地址：东莞松山湖高新技术产业开发区新竹路4号新竹苑17幢1单元B区6楼613室</dd>
              <dd>北京办公地址：北京市海淀区蓝靛厂南路25号牛顿办公区1011室</dd>
            </dl>
            <dl class="fl email">
              <dt>邮箱</dt>
              <dd>东莞负责人：严先生    bjh623683876@qq.com  </dd>
              <dd>北京负责人：游先生    yqqyouqing@163.com</dd>
            </dl>
          </div>
          <div class="fl right">
            <img draggable="false" src="../../assets/image/wximg.png" alt="">
            <div>
              <p>扫描二维码关注</p>
              <p>“羽戈科技公众号”</p>
            </div>
          </div>
        </section>
      </div>
    </div>
  </footer>
</template>
<script>
export default {
  methods:{
    goToTop(){
      document.body.scrollTop = 0
      document.documentElement.scrollTop = 0
    }
  }
}
</script>
<style scoped>
footer{
  height:505px;
}
.top{
  height:80px;
  background-color: #e1e1e1;
}
.foot-main{
  height:425px;
  color:#dbe8ff;
  background-color: #003670;
}
.goto-top{
  width:80px;
  height:80px;
  margin:0 auto;
  cursor: pointer;
  background: #003670 url('../../assets/image/icon/8.png') no-repeat 15px 15px;
}
.foot-wrap{
  width:1200px;
  height:425px;
  margin:0 auto;
  padding:18px 0 0 70px;
  box-sizing: border-box;
}
.foot-wrap h3 span{
  display: block;
  font-size: 30px;
  line-height: 48px;
}
dl{
  width:590px;
  height:110px;
}
dt{
  font-size: 18px;
  line-height: 45px;
  padding-left:22px;
  position: relative;
}
dt::after{
  content: url('../../assets/image/icon/9.png');
  display:block;
  position: absolute;
  left:0;
  top:0;
}
dd{
  font-size: 14px;
  line-height: 28px;
}
.tel dt::after{
  content: url('../../assets/image/icon/12.png');
}
.addr dt::after{
  content: url('../../assets/image/icon/11.png');
}
.email dt::after{
  content: url('../../assets/image/icon/13.png');
}
.tel, .email{
  width:300px;
}
.left{
  width:954px;
}
.right p{
  text-align: center;
}
</style>
